<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">账单详情</block>
		</cu-custom>
		<view class="tc pt50" style="padding-bottom: 50rpx;background-color: #ff5e1f;">
			<view class="fs26 fw600">
				<image :src="imgurl+'/img12.png'" class="img36 mr10"></image>
				<text class="fs28 text-white fw600">积分充值</text>
			</view>
			<view class="fs66 ff text-white">+1000<text class="fs26">积分</text></view>
			<view class="fs26" style="margin-top: -10rpx; color: rgba(255,255,255,0.8);">交易关闭</view>
		</view>
		<!-- 时间轴 -->
		<view class="cu-timeline">
			<view class="title fw600 ff margin-bottom">
				当前状态
			</view>
			<view class="cu-item first_item" :style="'background-image: url('+imgurl+'icon_close01.png);'">
				<view class="content">
					<view class="flex justify-between align-center">
						<view class="fs28 fw600">订单关闭</view>
						<view class="reason">原因</view>
					</view>
					<view class="flex justify-between align-center ">
						<view class="fs20 text-muted">2019.08.15 12:25:11</view>
					</view>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<view class="flex justify-between align-center">
						<view class="fs24 text-gray">平台审核</view>
					</view>
					<view class="flex justify-between align-center ">
						<view class="fs20 text-muted">2019.08.15 12:25:11</view>
					</view>
				</view>
			</view>
			<view class="cu-item last_item">
				<view class="content">
					<view class="flex justify-between align-center">
						<view class="fs24 text-gray">发起充值</view>
					</view>
					<view class="flex justify-between align-center ">
						<view class="fs20 text-muted">2019.08.15 12:25:11</view>
					</view>
				</view>
			</view>

		</view>
		<view class="qui-cells mt15">
			<view class="qui-cell">
				<view class="cell-hd fs24 text-gray">
					<view>充值积分</view>
					<view class="mt20">充值赠送</view>
				</view>
				<view class="cell-bd tr fs24">
					<view>200积分</view>
					<view class="mt20">2积分</view>
				</view>
			</view>
			<view class="qui-cell">
				<view class="cell-hd fs24 text-gray">
					<view>支付方式</view>
					<view class="mt20">支付金额</view>
					<view class="mt20">凭证单号</view>
				</view>
				<view class="cell-bd tr fs24">
					<view>线下打款</view>
					<view class="mt20">￥200.00</view>
					<view class="mt20">20195588132132011</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgurl: this.$imgurl,

			}
		},
		methods: {


		},


	}
</script>

<style lang="scss">
	.img36 {
		width: 36rpx;
		height: 36rpx;
		position: relative;
		top: 6rpx;
	}

	.fs66 {
		font-size: 66rpx;
	}

	.cu-timeline>.cu-item::after {
		left: 16rpx;
		width: 0rpx;
		top: 30rpx;
		border-left: 2rpx dashed rgba(22, 82, 222, 0.2);
		background-color: transparent;
	}

	.cu-timeline {
		background-color: #fff;
		padding: 30rpx;

		.cu-item {
			padding-top: 0px;
		}

		.content {
			background-color: transparent !important;
			padding: 0 !important;
		}
	}

	.cu-timeline>.cu-item::before {
		left: 0rpx;
		font-size: 24rpx;
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		top: 20rpx;
	}

	.cu-timeline>.cu-item {
		padding-left: 45rpx;
		padding-right: 0px;
	}

	.last_item {
		&:after {
			display: none !important;
		}
	}

	.first_item {
		background-repeat: no-repeat;
		z-index: 999;
		background-size: 30rpx 30rpx;

		&:before {
			display: none;
		}
	}

	.reason {
		width: 81rpx;
		height: 38rpx;
		line-height: 38rpx;
		border-radius: 20rpx;
		border: solid 1rpx #ff5e1f;
		font-size: 20rpx;
		color: #ff5e1f;
		text-align: center;
		display: inline-block;
	}
</style>
